今日目標說明

回想 DAY 8，我們將系統設計為「封閉式邀請制」，所以登入頁面不需要放什麼「忘記密碼」或「註冊帳號」的按鈕，只要給朋友兩個乾淨的輸入框：帳號與密碼。今天我們就用 MUI 的 Container 與 TextField 快速切出這個高質感的畫面！

【架構決策對比】登入表單的 UI/UX 設計守則

一個好的登入頁面，不只是把兩個輸入框放上去就好，魔鬼藏在細節裡：

1. 視覺回饋 (Loading State)：當使用者點擊「登入」後，按鈕必須變成 disabled (不可點擊) 並轉圈圈。這可以防止心急的使用者連點兩下，發送重複的 API 請求導致錯誤。
2. 密碼可視性切換 (Eye Icon)：手機打字容易按錯，提供一個可以切換顯示密碼的眼睛圖示，能大幅降低朋友登入失敗的挫折感。
3. 明確的錯誤提示：不要只彈出「登入失敗」，如果是帳號錯誤，要在輸入框下方用紅字明確提示 (我們在下一天串接 API 時會實作)。

核心程式碼片段

在 src/pages/LoginPage.tsx 中，我們利用 MUI 的版面組件，搭配背景模糊效果，刻畫出極具質感的登入頁：

import { Box, Paper, Typography, TextField, Button, Container } from '@mui/material';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';

const LoginPage = () => {
  return (
    <Container maxWidth="xs" sx={{ mt: 10 }}>
      {/* elevation 創造陰影質感 */}
      <Paper elevation={3} sx={{ p: 4, borderRadius: 4, backdropFilter: 'blur(10px)' }}>
        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mb: 3 }}>
          <LockOutlinedIcon color="primary" sx={{ fontSize: 40 }} />
          <Typography variant="h4" fontWeight="bold">系統登入</Typography>
        </Box>
        
        <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <TextField label="帳號" variant="outlined" fullWidth />
          <TextField label="密碼" type="password" variant="outlined" fullWidth />
          
          <Button variant="contained" size="large" fullWidth sx={{ mt: 2, borderRadius: 2 }}>
            進入圖鑑
          </Button>
        </Box>
      </Paper>
    </Container>
  );
};

實際畫面截圖

LoginPage 畫面呈現！

背景的模糊效果 (backdrop-filter) 以及 MUI 輸入框點擊後浮現的動畫質感。

小結

畫面切好了，但按鈕按下去還沒有反應。明天，我們要正式串接後端的登入 API，並把拿到的 JWT Token 妥善保管在瀏覽器裡！